<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLIP动画</title>
    <style>
        .list-item{
            border-radius: 20px;
            background-color: aquamarine;
            margin: 10px auto ;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <button class="btn">点击排序</button>
    <div class="list">
        <div class="list-item">HTML+CSS</div>
        <div class="list-item">JS</div>
        <div class="list-item">网络</div>
        <div class="list-item">工程化</div>
        <div class="list-item">框架</div>
        <div class="list-item">移动端</div>
        <div class="list-item">Nodejs</div>
    </div>
    <script>
        const list = document.querySelector('.list')
        const firstItem = document.querySelector('.list-item:first-child')
        const lastItem = document.querySelector('.list-item:last-child')
        function getLocation(){
            const rect = firstItem.getBoundingClientRect();
            return rect.top;
        }
       
        const start = getLocation();
        console.log('first:',start)
        const btn = document.querySelector('.btn')
        btn.onclick=()=>{
            list.insertBefore(firstItem,null);
            const end = getLocation();
            console.log('end:',end)

            const dis = start - end;
            firstItem.style.transform=`translateY(${dis}px)`

            raf(()=>{
                firstItem.style.transition = 'transform 1s'
                firstItem.style.removeProperty('transform');
                console.log('play')
            })
        }
        

function raf(callback){
    requestAnimationFrame(()=>{
        requestAnimationFrame(callback)
    })
}
function delay(duration=1000){
    const start = Date.now();
    while(Date.now()-start<duration){

    }
}

    </script>
</body>
</html>